import 'package:flutter/material.dart';
import 'package:p_location/common/res/common_res.dart';
import 'package:p_location/common/widget/right_arrow_item.dart';
import 'package:p_location/common/widget/split_title_view.dart';
import 'package:p_location/map/constant/map_http_url.dart';
import 'package:p_location/map/menus/map_menus.dart';
import 'package:p_location/map/res/dept_tree_info.dart';
import 'package:p_location/map/res/gis_person_type_info.dart';
import 'package:p_location/map/res/gis_person_type_res.dart';
import 'package:p_location/map/ui/dept_info_tree_page.dart';
import 'package:p_location/net/dio_http_client.dart';
import 'package:p_location/net/net_listener_impl.dart';
import 'package:dio/dio.dart';

class LocationMapRightDrawer extends StatefulWidget {
  @override
  _LocationMapRightDrawerState createState() => _LocationMapRightDrawerState();
}

class _LocationMapRightDrawerState extends State<LocationMapRightDrawer> {

  List<bool> mapShowStatusList = [false, false, false, false];
  String mapType = "2D平面图";

  //选择的人员类型
  List<int> chosenJobIds = [];

  DeptTreeInfo chosenDeptTreeInfo;

  bool personTypeExpandFlag = false;

  //人员类型列表
  List<GisPersonTypeInfo> personTypeList = [];

  @override
  void initState() {
    super.initState();
    _getPersonTypeList();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          margin: EdgeInsets.only(top: 13, bottom: 80),
          child: ListView(
            children: <Widget>[
              SplitTitleView(
                "地图显示",
                textColor: Color.fromRGBO(0, 0, 0, 0.65),
                backgroundColor: Color.fromRGBO(239, 239, 243, 1),
              ),
              Container(
                color: Colors.white,
                child: GridView.builder(
                    itemCount: MapMenus.menus.length,
                    padding: EdgeInsets.all(10),
                    shrinkWrap: true,
                    physics: new NeverScrollableScrollPhysics(),
                    //禁用滑动事件
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4, mainAxisSpacing: 20),
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          setState(() {
                            mapShowStatusList[index] =
                            !mapShowStatusList[index];
                          });
//                          Navigator.of(context).pop();
                        },
                        onTapDown: (event) {},
                        child: Column(
                          children: [
                            Stack(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                      color: mapShowStatusList[index]
                                          ? Colors.blue
                                          : Colors.white,
                                      borderRadius:
                                      BorderRadius.circular(100)),
                                  padding: EdgeInsets.all(2),
                                  child: Image.asset(
                                    MapMenus.menus[index].icon,
                                    width: 45,
                                    height: 45,
                                  ),
                                ),
                                Positioned(
                                  child: Offstage(
                                    offstage: !mapShowStatusList[index],
                                    child: Container(
                                      decoration: BoxDecoration(
                                          color: Colors.blue,
                                          borderRadius:
                                          BorderRadius.circular(100)),
                                      child: Icon(
                                        Icons.done,
                                        size: 15,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                  right: 1,
                                  bottom: 1,
                                )
                              ],
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 3),
                              child: Text(
                                MapMenus.menus[index].title,
                                style: TextStyle(
                                    color: Color(0xff000000), fontSize: 12),
                              ),
                            )
                          ],
                        ),
                      );
                    }),
              ),
              SplitTitleView(
                "地图类型",
                textColor: Color.fromRGBO(0, 0, 0, 0.65),
                backgroundColor: Color.fromRGBO(239, 239, 243, 1),
              ),
              Container(
                color: Colors.white,
                child: GridView.builder(
                    itemCount: MapMenus.mapTypes.length,
                    padding: EdgeInsets.all(10),
                    shrinkWrap: true,
                    physics: new NeverScrollableScrollPhysics(),
                    //禁用滑动事件
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4, mainAxisSpacing: 20),
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          setState(() {
                            mapType = MapMenus.mapTypes[index].title;
                          });
//                          Navigator.of(context).pop();
                        },
                        onTapDown: (event) {},
                        child: Column(
                          children: [
                            Stack(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                      color: mapType ==
                                          MapMenus.mapTypes[index].title
                                          ? Colors.blue
                                          : Colors.white,
                                      borderRadius:
                                      BorderRadius.circular(10)),
                                  padding: EdgeInsets.all(2),
                                  child: Image.asset(
                                    MapMenus.mapTypes[index].icon,
                                    width: 45,
                                    height: 45,
                                  ),
                                ),
                                Positioned(
                                  child: Offstage(
                                    offstage: mapType !=
                                        MapMenus.mapTypes[index].title,
                                    child: Container(
                                      decoration: BoxDecoration(
                                          color: Colors.blue,
                                          borderRadius:
                                          BorderRadius.circular(100)),
                                      child: Icon(
                                        Icons.done,
                                        size: 15,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                  right: 1,
                                  bottom: 1,
                                )
                              ],
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 3),
                              child: Text(
                                MapMenus.mapTypes[index].title,
                                style: TextStyle(
                                    color: Color(0xff000000), fontSize: 12),
                              ),
                            )
                          ],
                        ),
                      );
                    }),
              ),
              SplitTitleView(
                "人员筛选",
                textColor: Color.fromRGBO(0, 0, 0, 0.65),
                backgroundColor: Color.fromRGBO(239, 239, 243, 1),
                hasRightArrow: false,
              ),
              Container(
                color: Colors.white,
                child: GridView.builder(
                    itemCount: personTypeExpandFlag
                        ? personTypeList?.length ?? 0
                        : ((personTypeList?.length ?? 0) > 5
                        ? 6
                        : personTypeList.length),
                    padding: EdgeInsets.all(10),
                    shrinkWrap: true,
                    physics: new NeverScrollableScrollPhysics(),
                    //禁用滑动事件
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        mainAxisSpacing: 5,
                        crossAxisSpacing: 6,
                        childAspectRatio: 2.5),
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          print("onTap");
                          setState(() {
                            if (chosenJobIds
                                .contains(personTypeList[index].value)) {
                              chosenJobIds
                                  .remove(personTypeList[index].value);
                            } else {
                              chosenJobIds.add(personTypeList[index].value);
                            }
                            personTypeList[index].chosenFlag =
                            !personTypeList[index].chosenFlag;
                            print("选择的jogId");
                            print(chosenJobIds);
                          });
                        },
                        onTapDown: (event) {},
                        child: Container(
                          decoration: BoxDecoration(
                              color: personTypeList[index].chosenFlag
                                  ? Color.fromRGBO(56, 160, 253, 0.9)
                                  : Color.fromRGBO(239, 239, 243, 1),
                              borderRadius:
                              BorderRadius.all(Radius.circular(18))),
                          alignment: Alignment.center,
                          padding: EdgeInsets.only(left: 12, right: 12),
                          child: Text(
                            personTypeList[index].label,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                color: personTypeList[index].chosenFlag
                                    ? Colors.white
                                    : Color.fromRGBO(0, 0, 0, 1),
                                fontSize: 15),
                          ),
                        ),
                      );
                    }),
              ),
              SplitTitleView(
                "部门",
                textColor: Color.fromRGBO(0, 0, 0, 0.65),
                backgroundColor: Color.fromRGBO(239, 239, 243, 1),
                hasRightArrow: false,
              ),
              RightArrowItem(
                chosenDeptTreeInfo != null
                    ? chosenDeptTreeInfo.label
                    : "请选择",
                "",
                    () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => DeptInfoTreePage()))
                      .then((value) {
//                        print("选取了人员" + value.name);
                    setState(() {
                      chosenDeptTreeInfo = value;
                    });
                  });
                },
                isMust: false,
              )
            ],
          ),
        ),
        Positioned(
            bottom: 1,
            child: GestureDetector(
              onTap: () {
//                NavigatorUtil.push(context, PageTraceRecord());
//                logout();
              },
              child: Container(
                color: Colors.white,
                width: 304,
                height: 50,
                child: Flex(
                  direction: Axis.horizontal,
                  children: [
                    Expanded(
                        child: GestureDetector(
                          onTap: () {
                            print("重置");
                            reset();
                          },
                          child: Container(
                            color: Colors.white,
                            alignment: Alignment.center,
                            child: Text(
                              "重置",
                              style: TextStyle(
                                  color: Color.fromRGBO(26, 103, 250, 1)),
                            ),
                          ),
                        )),
                    FractionallySizedBox(
                      heightFactor: 1,
                      child: Container(
                        color: Color.fromARGB(33, 0, 0, 0),
                        width: 0.5,
                        child: Text(""),
                      ),
                    ),
                    Expanded(
                        child: GestureDetector(
                          onTap: () {
                            print("确定");
                          },
                          child: Container(
                              alignment: Alignment.center,
                              child: Text(
                                "确定",
                                style: TextStyle(
                                    color: Color.fromRGBO(26, 103, 250, 1)),
                              )),
                        ))
                  ],
                ),
              ),
            ))
      ],
    );
  }

  reset() {
    mapShowStatusList = [false, false, false, false];
    chosenJobIds = [];
    personTypeList.forEach((element) {
      element.chosenFlag = false;
    });
    setState(() {});
  }

  _getPersonTypeList() async {
    if (personTypeList != null && personTypeList.length > 0) {
      return;
    }
    Map<String, dynamic> params = {};
//    DioHttpClient.addHeader("buildid", "202722");
    await DioHttpClient.requestGet(
        context,
        MapHttpUrl.PERSON_TYPE_LIST_URL,
        params,
        new NetListenerImpl((Response response) {
          if (response != null && response.data != null) {
            GisPersonTypeRes res = GisPersonTypeRes.fromJson(response.data);
            if (res != null && res.code == 0 && res.data != null) {
              personTypeList = res.data;
            }
          }
        }, (CommonRes errorRes) {}));
  }
}
